---
title: Text
description: Used to render text and paragraphs within an interface.
links:
  source: components/typography
---

<ExampleTabs name="text-basic" />

## Usage

```jsx
import { Text } from "@chakra-ui/react"
```

```jsx
<Text>This is the text component</Text>
```

## Examples

### Sizes

Use the `fontSize` or `textStyle` prop to change the size of the text.

<ExampleTabs name="text-with-sizes" />

### Weights

Use the `fontWeight` prop to change the weight of the text.

<ExampleTabs name="text-with-weights" />

### Truncation

Use the `truncate` prop to truncate the text after a single line.

<ExampleTabs name="text-with-truncate" />

### Line Clamp

Use the `lineClamp` prop to truncate the text after a certain number of lines.

<ExampleTabs name="text-with-line-clamp" />

### Ref

Here's how to access the underlying element reference

```tsx
const Demo = () => {
  const ref = useRef<HTMLParagraphElement | null>(null)
  return <Text ref={ref}>This is the text component</Text>
}
```
